<!-- 我的持仓 -->
<template>
  <view class="ho-container">
    <t-header @back="clickNavBackFn">我的持仓</t-header>
    <!-- content -->
    <view class="ho-content">
      <mescroll-uni
        :height="`${height}rpx`"
        :down="downOption"
        :up="upOption"
        @init="mescrollInit"
        @down="downCallback"
        @up="upCallback"
      >
        <!-- 数据列表 -->
        <view
          v-for="(item, index) in list"
          :key="index"
          @click="toDetail(item)"
          class="data-item"
        >
          <view class="di-t">
            <view class="di-t-l">
              <image
                class="tag"
                :src="`/static/images/icons/${item.marketCode}.png`"
                mode=""
              />
              <view class="title">{{ item.title }}</view>
              <view class="code">{{ item.code }}</view>
            </view>
            <view class="di-t-r">
              <tui-icon name="arrowright" size="20"></tui-icon>
            </view>
          </view>
          <view class="di-line"></view>
          <view class="di-b">
            <view class="flex align-center head">
              <view class="name">名称</view>
              <view class="price">持仓 | 市值</view>
              <view class="price">现价 | 成本</view>
              <view class="up-down">盈亏 | 涨幅</view>
            </view>
            <view class="flex align-center head">
              <view class="name" @click.stop="toStock(item)">
                <view>{{ item.title }}</view>
                <view class="flex align-center margin-top-xs">
                  <image
                    class="tag"
                    :src="`/static/images/icons/${item.marketCode}.png`"
                    mode=""
                  ></image>
                  <text class="text-sm">{{ item.code }}</text>
                </view>
              </view>
              <view class="price">
                <view>{{ item.number }}</view>
                <view class="margin-top-xs">{{ item.cityValue }}</view>
              </view>
              <view class="price">
                <view>{{ item.cai_buy }}</view>
                <view class="margin-top-xs">{{ item.buyprice }}</view>
              </view>
              <view
                class="up-down"
                :class="item.profitLose > 0 ? 'text-red' : 'text-green'"
              >
                <view>{{ item.profitLose }}</view>
                <view class="text-sm margin-top-xs">{{
                  item.profitLose_rate
                }}</view>
              </view>
            </view>
          </view>
        </view>
      </mescroll-uni>
    </view>
  </view>
</template>

<script setup>
  import { ref, onBeforeMount } from 'vue';
  import { onLoad } from '@dcloudio/uni-app';
  import { onPageScroll, onReachBottom } from '@dcloudio/uni-app';
  import useMescroll from '@/uni_modules/mescroll-uni/hooks/useMescroll.js';

  const { mescrollInit, downCallback, getMescroll } = useMescroll(
    onPageScroll,
    onReachBottom
  );

  // api
  import { holdStock } from '@/api/user.js';

  // utils
  import { getMarketCode } from '@/utils/stock.js';

  import THeader from '@/components/views/t-header/index.vue'; // 头部组件

  // 点击返回
  const clickNavBackFn = () => {
    const pages = getCurrentPages();
    if (pages.length >= 2) {
      uni.navigateBack();
    } else {
      uni.switchTab({
        url: '/pages/my/index',
      });
    }
  };

  const height = ref(0);

  onLoad(() => {
    height.value = 1418;
  });

  onBeforeMount(() => {
    getListFn();
  });

  // mescroll-body 配置（down && up）
  const downOption = {
    auto: false,
  };
  const upOption = {
    auto: false,
    empty: {
      use: true,
      icon: '/static/images/wushuju.png',
      tip: '~ 空空如也 ~',
    },
  };

  const getListFn = () => {
    setTimeout(function () {
      getMescroll().resetUpScroll();
    }, 0);
  };

  // 列表数据
  const list = ref([]);

  const upCallback = (mescroll) => {
    holdStock({
      status: 1,
      buytype: 1,
      page: mescroll.num,
      size: mescroll.size,
    }).then((res) => {
      if (res.code == 1) {
        if (mescroll.num == 1) list.value = [];
        res.data.list.forEach((v) => {
          v.marketCode = getMarketCode(v.allcode);
        });
        list.value = list.value.concat(res.data.list);
        mescroll.endSuccess(res.data.list.length);
      } else {
        mescroll.endErr();
      }
    });
  };

  const toDetail = (item) => {
    uni.navigateTo({
      url: '/pages/shares/holdDetail?data=' + JSON.stringify(item),
    });
  };
  const toStock = (item) => {
    uni.navigateTo({
      url: '/pages/shares/detail?code=' + item.allcode,
    });
  };
</script>

<style lang="scss" scoped>
  .ho-container {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100vh;

    background: #f5f5f5;
    box-sizing: border-box;

    .ho-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      padding: 0 18rpx 26rpx;

      .data-item {
        width: 716rpx;
        height: 333rpx;
        margin-bottom: 20rpx;
        padding: 32rpx 20rpx;
        border-radius: 34rpx;
        background: #ffffff;
        box-sizing: border-box;

        .di-t {
          display: flex;
          justify-content: space-between;

          .di-t-l {
            display: flex;
            align-items: center;

            .title {
              margin-right: 10rpx;
              color: #000000;
              font-size: 32rpx;
              font-weight: 400;
              font-family: PingFangSC, PingFang SC;
            }

            .code {
              color: #8f8f8f;
              font-size: 26rpx;
              font-weight: bold;
              font-family: DINAlternate, DINAlternate;
            }
          }

          .di-t-r {
            display: flex;
            align-items: center;
          }
        }

        .di-line {
          width: 100%;
          margin: 20rpx 0;
          border: 2rpx solid #e2e2e2;
        }

        .di-b {
        }
      }
    }
  }

  .name,
  .price,
  .up-down {
    box-sizing: border-box;
    padding: 16rpx;
    font-size: 26rpx;
  }
  .name {
    width: 25%;
  }
  .price {
    width: 24%;
    text-align: center;
  }
  .up-down {
    width: 25%;
    text-align: right;
  }
  .tag {
    width: 28rpx;
    height: 28rpx;
    margin-right: 10rpx;
  }
</style>
